<template>
  <!-- 代码中大量的if-else -->
  <h3 style="text-align: center; margin: 0; padding-top: 5px; padding-bottom: 5px;">订单获客单</h3>
  <el-form ref="formRef" :model="localFormData" :rules="formRules" label-width="0">
    <el-descriptions :column="4" border label-width="120px" size="small">
      <el-descriptions-item label="获客编号">
        <template v-if="isDetail">
          <span>{{ localFormData.obtainGuestNo}}</span>
        </template>
        <template v-else>
          <el-form-item prop="obtainGuestNo">
            <el-input
              v-model="localFormData.obtainGuestNo"
              class="no-border-input underline-input w-80!"
              placeholder="系统自动生成"
              disabled />
          </el-form-item>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="客户名称/单位名称">
        <template v-if="isDetail">
          <span>{{ localFormData.clientName}}</span>
        </template>
        <template v-else>
          <el-form-item prop="clientName">
            <el-input
              v-model="localFormData.clientName"
              class="no-border-input underline-input w-80!"
              placeholder="请输入客户名称/单位名称"
            />
          </el-form-item>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="身份证号/企业税号">
        <template v-if="isDetail">
          <span>{{ localFormData.taxNumber}}</span>
        </template>
        <template v-else>
          <el-form-item prop="taxNumber">
            <el-input
              v-model="localFormData.taxNumber"
              class="no-border-input underline-input w-80!"
              placeholder="请输入身份证号/企业税号"
            />
          </el-form-item>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="客户联系方式">
        <template v-if="isDetail">
          <span>{{ localFormData.clientPhone}}</span>
        </template>
        <template v-else>
          <el-form-item prop="clientPhone">
            <el-input
              v-model="localFormData.clientPhone"
              class="no-border-input underline-input w-80!"
              placeholder="请输入客户联系方式"
            />
          </el-form-item>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="所属大区">
        <template v-if="isDetail">
          <span>{{ getDictObj(DICT_TYPE.CRM_BELONG_AREA, localFormData.belongArea)?.label || ''}}</span>
        </template>
        <template v-else>
          <el-form-item prop="belongArea">
            <el-select
              v-model="localFormData.belongArea"
              placeholder="请选择所属大区">
              <el-option
                v-for="dict in getIntDictOptions(DICT_TYPE.CRM_BELONG_AREA)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="业务经理">
        <template v-if="isDetail">
          <span>{{ localFormData.businessManagerName}}</span>
        </template>
        <template v-else>
          <el-form-item prop="businessManagerId">
            <el-select
              v-model="localFormData.businessManagerId"
              class="w-1/1"
              filterable
            >
              <el-option
                v-for="item in userOptions"
                :key="item.id" :label="item.nickname" :value="item.id" />
            </el-select>
          </el-form-item>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="业务经理联系方式">
        <template v-if="isDetail">
          <span>{{ localFormData.businessManagerPhone}}</span>
        </template>
        <template v-else>
          <el-form-item prop="businessManagerPhone">
            <el-input
              v-model="localFormData.businessManagerPhone"
              class="no-border-input underline-input w-80!"
              placeholder="请输入经理联系方式"
              :readonly="isDetail" />
          </el-form-item>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="付款方式">
        <template v-if="isDetail">
          <span>{{ getDictObj(DICT_TYPE.PAY_CHANNEL_CODE, localFormData.payType)?.label || ''}}</span>
        </template>
        <template v-else>
          <el-form-item prop="payType">
            <el-select
              v-model="localFormData.payType"
              placeholder="请选择付款方式"
            >
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="客户类型">
        <el-form-item prop="clientType" >
          <el-radio-group
            v-model="localFormData.clientType"
            :class="{ 'readonly-radio-group': isDetail }">
            <el-radio :value="0">个人</el-radio>
            <el-radio :value="1">企业</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="销售类型">
        <el-form-item prop="sellType">
          <el-radio-group
            v-model="localFormData.sellType"
            :class="{ 'readonly-radio-group': isDetail }">
            <el-radio :value="0">物料类(不含施工)</el-radio>
            <el-radio :value="1">项目类(含施工)</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="合同类型">
        <el-form-item prop="contractType">
          <el-radio-group
            v-model="localFormData.contractType"
            :class="{ 'readonly-radio-group': isDetail }">
            <el-radio :value="0">标准合同</el-radio>
            <el-radio :value="1">非标准合同</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="产品类型">
        <el-form-item prop="productType">
          <el-radio-group
            v-model="localFormData.productType"
            :class="{ 'readonly-radio-group': isDetail }">
            <el-radio :value="0">标准产品</el-radio>
            <el-radio :value="1">非标准产品</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-descriptions-item>

      <el-descriptions-item label="客户地址" :span="isDetail ? 4 : 2">
        <template v-if="isDetail">
          <span>{{ localFormData.clientAreaName}} {{localFormData.clientDetailAddress}}</span>
        </template>
        <template v-else>
          <el-form-item prop="clientAreaId">
            <div class="address-info">
              <el-cascader
                v-model="localFormData.clientAreaId"
                :options="areaList"
                :props="defaultProps"
                class="w-1/1"
                clearable
                filterable
                placeholder="请选择城市"
              />
            </div>
          </el-form-item>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="详细地址" :span="2" v-if="!isDetail">
        <el-form-item prop="clientDetailAddress">
          <el-input
            v-model="localFormData.clientDetailAddress"
            class="no-border-input underline-input w-full!"
            placeholder="请输入详细地址"
            :readonly="isDetail" />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="4">
        <el-form-item prop="remark">
          <el-input
            v-model="localFormData.remark"
            type="textarea"
            class="no-border-input underline-input w-full!"
            placeholder="请输入备注"
            :readonly="isDetail" />
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
  </el-form>

</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {DICT_TYPE, getDictObj, getIntDictOptions, getStrDictOptions} from '@/utils/dict'
import { defaultProps } from '@/utils/tree'
import * as AreaApi from '@/api/system/area'
import * as UserApi from '@/api/system/user'

const props = defineProps({
  formData: {
    type: Object,
    required: true
  },
  isDetail: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:formData'])

// 使用计算属性创建本地副本
const localFormData = computed({
  get: () => props.formData,
  set: (value) => emit('update:formData', value)
})

// 地区列表
const areaList = ref([])
// 用户列表
const userOptions = ref<UserApi.UserVO[]>([])
// 表单规则
const formRules = ref<FormRules>({
  clientName: [
    { required: true, message: '客户名称/单位名称不能为空', trigger: 'blur' }
  ],
  taxNumber: [
    { required: true, message: '身份证号/企业税号不能为空', trigger: 'blur' }
  ],
  clientPhone: [
    { required: true, message: '客户联系方式不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  belongArea: [
    { required: true, message: '所属大区不能为空', trigger: 'change' }
  ],
  businessManagerId: [
    { required: true, message: '业务经理不能为空', trigger: 'change' }
  ],
  businessManagerPhone: [
    { required: true, message: '业务经理联系方式不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  payType: [
    { required: true, message: '付款方式不能为空', trigger: 'change' }
  ],
  clientType: [
    { required: true, message: '客户类型不能为空', trigger: 'change' }
  ],
  sellType: [
    { required: true, message: '销售类型不能为空', trigger: 'change' }
  ],
  contractType: [
    { required: true, message: '合同类型不能为空', trigger: 'change' }
  ],
  productType: [
    { required: true, message: '产品类型不能为空', trigger: 'change' }
  ],
  clientAreaId: [
    { required: true, message: '客户地址不能为空', trigger: 'change' }
  ],
  clientDetailAddress: [
    { required: true, message: '详细地址不能为空', trigger: 'blur' }
  ]
})

// 暴露表单引用给父组件
const formRef = ref<FormInstance>()
defineExpose({ formRef })

// 初始化数据
onMounted(async () => {
  // 获取地区列表
  areaList.value = await AreaApi.getAreaTree()
  // 获取用户列表
  userOptions.value = await UserApi.getSimpleUserList()
})
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0;
}
.readonly-radio-group {
   pointer-events: none; /* 禁止所有鼠标交互 */
 }
</style>
